{{extend name="layout/base-html"}}

{{block name="body"}}
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <input type="hidden" name="value_type" value="{{$data.value_type}}">

            {{if $data.value_type == 0}}
            <div class="layui-form-item">
                <label for="value" class="layui-form-label"><span
                        class="x-red">*</span>{{$data.name|default=''}}</label>
                <div class="layui-input-inline">
                    <input type="text" id="value" name="value" autocomplete="off" class="layui-input"
                           value="{{$data.value}}">
                </div>
            </div>

            {{elseif $data.value_type == 1}}
            <div class="layui-form-item">
                <label for="value" class="layui-form-label"><span class="x-red">*</span>上传图片</label>

                <div class="layui-input-block rain-resource">
                    <button type="button" class="layui-btn layui-btn-normal" id="select_img">选择文件</button>
                    <button type="button" class="layui-btn" id="upload">开始上传</button>
                    <button type="button" class="layui-btn" id="reset-img">重置图片</button>

                    <div class="layui-upload-list">
                        <input type="hidden" name="value">
                        <div class="upload__img">
                            <img class="layui-upload-img" src="">
                        </div>
                    </div>
                </div>
            </div>

            {{elseif $data.value_type == 2}}
            <div class="layui-form-item message-content">
                <label class="layui-form-label"><span class="x-red">*</span>{{$data.name|default=''}}</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="value" id="value-box" class="layui-textarea">{{$data.value|default=''}}</textarea>
                </div>
            </div>
            {{/if}}

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述"
                              class="layui-textarea">{{$data.description|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>

                <button class="layui-btn" lay-filter="edit" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import {update} from "/static/admin/js/api/additional/config.js";
    import {uploadApi} from "/static/admin/js/extends/layui-upload.js";
    import {config as tinyConfig} from "/static/admin/js/extends/tinyMce.js";

    let isData = '1' === '{{$data && $data.value_type == 2 ? 1 : 0}}';

    if (isData) {
        // 初始化富文本
        tinymce.init({
            ...tinyConfig.config,

            selector: '#value-box', //容器，可使用css选择器
        });
    }

    layui.use(['form', 'upload'], () => {
        let form = layui.form,
            upload = layui.upload

        // 监听事件
        formData(form, 'edit', {
            request: update,
            id: '{{$data.id}}',
        }, false, data => {
            if (isData) data.field.value = tinymce.get('value-box').getContent();
        });

        // 是否需要上传图片
        if ('1' === '{{$data && $data.value_type == 1 ? 1 : 0}}') {
            uploadApi.upload = upload;
            uploadApi.image({
                elem: '#select_img',
                bindAction: '#upload',
                resetAction: "#reset-img",
            }, {
                resource: JSON.parse('{{$data.value|raw|default="{}"}}')
            });
        }
    });
</script>
{{/block}}
